<template>
    <div>
        <!-- Header Start -->
        <el-card shadow="never" class="!border-none">
            <el-page-header :content="id ? '编辑团长' : '新增团长'" @back="$router.back()" />
        </el-card>
        <!-- Header End -->

        <!-- Main Start -->
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
            <el-card shadow="never" class="!border-none mt-4">
                <el-form-item label="用户ID:" prop="uuid" v-if="!id">
                    <el-input
                        class="ls-input"
                        v-model="formData.uuid"
                        placeholder="请输入用户ID"
                    ></el-input>
                </el-form-item>
				<el-form-item label="团长姓名:" prop="name">
				    <el-input
				        class="ls-input"
				        v-model="formData.name"
				        placeholder="请输入真实姓名"
				    ></el-input>
				</el-form-item>
				<el-form-item label="手机号:" prop="phone">
				    <el-input
				        class="ls-input"
				        v-model="formData.phone"
				        placeholder="请输入手机号"
				    ></el-input>
				</el-form-item>
				<el-form-item label="代理邀请码:" prop="inviter_code" v-if="!id">
				    <el-input
				        class="ls-input"
				        v-model="formData.inviter_code"
				        placeholder="请输入代理邀请码"
				    ></el-input>
				</el-form-item>
				<el-form-item label="社区名称:" prop="community_name">
				    <el-input
				        class="ls-input"
				        v-model="formData.community_name"
				        placeholder="请输入社区名称"
				    ></el-input>
				</el-form-item>
                <el-form-item label="门头照片" prop="image">
                    <div>
                        <material-picker :limit="1" v-model="formData.image" />
                        <div class="form-tips">
                            建议尺寸：600*600,请上传自提点照片，方便用户寻找
                        </div>
                    </div>
                </el-form-item>
              
                <el-form-item label="自提点地址" prop="province_id">
                    <area-select
                        v-model:province_id="formData.province_id"
                        v-model:city_id="formData.city_id"
                        v-model:district_id="formData.area_id"
                        v-model:province="formData.province"
                        v-model:city="formData.city"
                        v-model:district="formData.area"
                    />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input
                        class="ls-input"
                        v-model="formData.address"
                        placeholder="请输入详细地址"
                    ></el-input>
                    <el-button @click="search"> 搜索地图</el-button>
                </el-form-item>
                <el-form-item label="地图定位" prop="longitude" v-if="obj.province_id.length > 0">
                    <div>
                        <div id="container" class="map-container mt-2 w-[600px]"></div>
                        <div class="form-tips">为了准确获取位置，请在地图上直接点击获取数据。</div>
                    </div>
                </el-form-item>
            </el-card>
        </el-form>
        <!-- Main End -->

        <!-- Footer Start -->
        <footer-btns>
            <el-button type="primary" @click="handlesubmit">保存</el-button>
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import FooterBtns from '@/components/footer-btns/index.vue'
import {
    communityInfoAdd,
    communityInfoEdit,
    communityInfoDetail
} from '@/api/teamhead'
// import { getUserList } from '@/api/consumer'
import areaSelect from './components/area-select.vue'
import { useMap } from '@/hooks/useMap'
import feedback from '@/utils/feedback'

const formRef = ref<any>()

const { obj, addressGeocoder, loadTencentMapScript } = useMap()
// console.log(obj)
const route = useRoute()
const id: any = route.query.id
const formData = ref<any>({
	uuid:"",
    name: '',
    image: 'http://livecc.cyx.zzcyx1688.cn/upload/0f/fd3e56328bd4e6938bfa4da1064aef.jpg',
	phone:'',
	community_name:"",
	inviter_code:"",
	province: '',
	province_id: obj.province_id,
	city: '',
	city_id: obj.city_id,
	area: '',
	area_id: obj.district_id || '',
	district_id: obj.district_id || '',
	address: obj.address,
    latitude: obj.latitude,
    longitude: obj.longitude,
	community_id:''
})
const nickname = ref('')

watch(
    () => obj,
    (val: Record<string, string>) => {
        Object.keys(val).forEach((key) => (formData.value[key] = val[key]))
    },
    { deep: true }
)

//搜索地址
const search = async () => {
    addressGeocoder(
        formData.value.province,
        formData.value.city,
        formData.value.area,
        formData.value.address
    )
}

// 表单校验规则
const rules = reactive({
    name: [{ required: true, message: '请输入团长姓名', trigger: 'blur' }],
    image: [{ required: true, message: '请选择门头照', trigger: 'blur' }],
    uuid: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    province_id: [{ required: true, message: '请选择自提点地址', trigger: 'blur' }],
    longitude: [{ required: true, message: '请选择', trigger: 'blur' }]
})


// 获取用户列表
// const userList = ref<any>([])
// const getUserLists = async (keyword: any) => {
//     const { lists } = await getUserList({ keyword })
//     userList.value = lists
// }

const getTeamheadDetail = async () => {
    const res = await communityInfoDetail({ community_id:id })
	
    formData.value = res.info
	formData.value.community_id = res.info.id
    // nickname.value = formData.value.user.nickname
    // console.log('formData', formData.value.user.nickname)
}

const router = useRouter()
//保存
const handlesubmit = async () => {
    await formRef.value?.validate()
    try {
        if (id) {
            await communityInfoEdit(formData.value)
        } else {
            await communityInfoAdd(formData.value)
        }
        router.back()
    } catch (error) {
        console.log(error)
    }
}
onMounted(async () => {
    // getUserLists('')
    if (id) {
        await getTeamheadDetail()
        setTimeout(() => {
            addressGeocoder(
                formData.value.province,
                formData.value.city,
                formData.value.area,
                formData.value.address
            )
            loadTencentMapScript(formData.value.latitude, formData.value.longitude)
        }, 500)
    } 
})
</script>

<style lang="scss" scoped>
.ls-input,
.select {
    width: 340px;
}
</style>
